package myJs.cps.project

import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useState
import slinky.core.facade.ReactElement
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import myJs.Implicits._

/** Created by yz on 21/1/2022
  */
@react object ScatterCp {

  case class Props(kind: String)

  val component = FunctionalComponent[Props] { props =>
    val imageName = props.kind match {
      case "All" => s"Landscape"
      case x => s"${x}"
    }
    val imageTypeMap = SeqMap("medium_reso" -> "Medium", "high_reso" -> "High")
    val (imageType, setImageType) = useState("medium_reso")
    object FTool {

      def selectImageType(curImageType: String) = () => {
        setImageType(curImageType)
      }

    }

    div(
      h5(
        style := Style(marginBottom = 15, fontSize = 16, marginTop = 15),
        "UMAP Plot ", {
          val popover: ReactElement = Popover(id = "popover-basic")(
            Popover.Title("Note"),
            Popover.Content(
              "UMAP plot of cell clusters colored by manually annotated cell types"
            )
          )
          OverlayTrigger(
            placement = "right",
            trigger = js.Array("focus", "hover"),
            overlay = popover
          )(
            span(
              a(`type` := "button", i(className := "fas fa-info-circle"))
            )
          )
        }
      ),
      div(
        style := Style(
          display = csstypeStrings.flex,
          justifyContent = csstypeStrings.`space-between`,
          marginBottom = 5
        ),
        div(
          style := Style(),
          span(
            style:=Style(marginRight = 5),
            "Resolution "
          ),
          imageTypeMap.map { case (dirName, showName) =>
            val clsStr = if (imageType == dirName) "mySelected" else ""
            a(
              key := s"${dirName}",
              style := Style(cursor = csstypeStrings.pointer, marginRight = 5),
              className := s"imageType gene_tag btn btn-default btn-xs ${clsStr}",
              onClick := FTool.selectImageType(dirName),
              showName
            )
          }
        ),
        div(
          style := Style(marginLeft = 5),
          className := "btn-group",
          a(
            title := "Export image",
            className := "btn  btn-default idsButton",
            data - "toggle" := "dropdown",
            data - "hover" := "dropdown",
            data - "close-others" := "true",
            aria - "expanded" := "false",
            i(className := "fa fa-bars")
          ),
          ul(
            className := "dropdown-menu pull-right",
            li(
              a(href := s"${Api.dimPlotDownload}/${imageType}/${imageName}.png", "Download PNG image")
            )
          )
        )
      ),
      img(
        style := Style(marginLeft = 0),
        className := "interAnnoImg",
        src := s"${Api.dimPlot}/${imageType}/${imageName}.png"
      )
    )

  }

  object STool {}

}
